<template>
  <!-- 点位管理 =>合作商管理 -->
  <div>
    <!-- 搜索框 -->
    <el-row>
      <el-col :span="24">
        <div class="header">
          <el-form :inline="true">
            <el-form-item label="合作商搜索：">
              <el-input v-model="partnerName" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="onSubmit"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <!--  列表-->
    <el-row>
      <el-col :span="24">
        <div class="body">
          <el-button icon="el-icon-circle-plus-outline" @click="addClickFn()"
            >新建</el-button
          >
          <el-table
            :data="PartnerList.currentPageRecords"
            :header-cell-style="{ background: '#f3f6fb' }"
            style="width: 100%"
          >
            <el-table-column
              fixed
              type="index"
              :index="indexMethod"
              label="序号"
              width="100"
            >
            </el-table-column>
            <el-table-column prop="name" label="合作商名称"> </el-table-column>
            <el-table-column prop="account" label="账号"> </el-table-column>
            <el-table-column prop="vmCount" label="设备数量"> </el-table-column>
            <el-table-column prop="ratio" label="分成比例"> </el-table-column>
            <el-table-column prop="contact" label="联系人"> </el-table-column>
            <el-table-column prop="phone" label="联系电话"> </el-table-column>
            <el-table-column label="操作" width="280">
              <template slot-scope="scope">
                <el-link
                  :underline="false"
                  @click="resetFn(scope.row.id)"
                  type="primary"
                  >重置密码</el-link
                >
                <el-link
                  :underline="false"
                  @click="lookFn(scope.row)"
                  type="primary"
                  >查看详情</el-link
                >
                <el-link
                  :underline="false"
                  @click="changeFn(scope.row)"
                  type="primary"
                  >修改</el-link
                >
                <el-link
                  :underline="false"
                  @click="delFn(scope.row.id)"
                  type="danger"
                  >删除</el-link
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            next-text="下一页"
            prev-text="上一页"
            @current-change="handleCurrentChange"
            :current-page="pageIndex"
            :page-count="+PartnerList.totalPage"
            layout="total, slot, ->, prev, next"
          >
            <span class="page"
              >共{{ PartnerList.totalCount || 0 }}条记录 第 {{ pageIndex }}/{{
                PartnerList.totalPage
              }}页</span
            >
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <!-- form弹框 -->
    <el-dialog :title="arrOpinion === 'add' ?   '新增合作商' : '修改合作商' " :visible.sync="dialogFormVisible" width="630px">
      <el-form :rules="rules" :model="form">
        <el-form-item label="合作商名称：" label-width="120px" prop="name">
          <el-input
            type="text"
            placeholder="请输入"
            v-model="form.name"
            maxlength="10"
            show-word-limit
            style="width: 360px"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="联系人：" label-width="120px" prop="contact">
          <el-input
            type="text"
            placeholder="请输入"
            v-model="form.contact"
            maxlength="10"
            show-word-limit
            style="width: 360px"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="联系电话：" label-width="120px" prop="phone">
          <el-input
            type="text"
            placeholder="请输入"
            v-model="form.phone"
            maxlength="11"
            style="width: 360px"
          >
          </el-input>
        </el-form-item>
        <template v-if="arrOpinion === 'change'">
          <el-form-item label="创建时间：" label-width="120px">
            <span>{{ form.createTime }}</span>
          </el-form-item>
        </template>

        <el-form-item label="分成比例：" label-width="120px" prop="ratio">
          <el-input-number
            v-model="form.ratio"
            controls-position="right"
            :min="1"
            :max="100"
            style="width: 360px"
          ></el-input-number>
        </el-form-item>
        <template v-if="arrOpinion === 'add'">
          <el-form-item label="账号：" label-width="120px" prop="account">
            <el-input
              type="text"
              placeholder="请输入"
              v-model="form.account"
              style="width: 360px"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="密码：" label-width="120px" prop="password">
            <el-input
              type="password"
              placeholder="请输入"
              v-model="form.password"
              style="width: 360px"
            >
            </el-input>
          </el-form-item>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="clickFn()">取 消</el-button>
        <template v-if="arrOpinion === 'change'">
          <el-button type="primary" @click="changeReigionFn()">确 定</el-button>
        </template>
        <template v-if="arrOpinion === 'add'">
          <el-button type="primary" @click="addReigionFn()">确 定</el-button>
        </template>
      </div>
    </el-dialog>
    <!-- table 弹框 查看详情 -->
    <el-dialog
      title="合作商详情"
      :visible.sync="dialogTableVisible"
      width="686px"
    >
      <div class="dialog_bottom">
        <el-row>
          <el-col :span="4"><span>合作商名称：</span></el-col>
          <el-col :span="7"><span>{{ row.name }}</span></el-col>
          <el-col :span="2"><div style="height: 16px"></div></el-col>
          <el-col :span="4"><span>联系人：</span></el-col>
          <el-col :span="7"><span>{{ row.contact}}</span></el-col>
        </el-row>
        <el-row>
          <el-col :span="4"><span>联系电话：</span></el-col>
          <el-col :span="7"><span>{{ row.mobile }}</span></el-col>
          <el-col :span="2"><div style="height: 16px"></div></el-col>
          <el-col :span="4"><span>分成比例：</span></el-col>
          <el-col :span="7"><span>{{ row.ratio}}</span></el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  partnerList,
  delPartner,
  resetPwd,
  changePartner,
  addPartner
} from '@/api/partner'
export default {
  data () {
    return {
      /* 查询条件 */
      partnerName: '',
      /* 当前页 */
      pageIndex: 1,
      /* 当前页数量 */
      pageSize: 10,
      /* 列表数据 */
      PartnerList: {},
      /* 详情数据 */
      detailsList: {},
      name: '',
      /* form弹框 */
      dialogFormVisible: false,
      /* table弹框 */
      dialogTableVisible: false,
      /* 判断是请求类型 */
      arr: ['add', 'change'],
      arrOpinion: '',
      /* form表单数据 */
      form: {
        name: '',
        phone: '',
        contact: '',
        ratio: 1,
        mobile: '',
        password: '',
        account: ''
      },
      /* 效验规则 */
      rules: {
        name: [{ required: true, message: '请输入', trigger: 'blur' }],
        contact: [{ required: true, message: '请输入', trigger: 'blur' }],
        phone: [
          { required: true, message: '请输入', trigger: 'blur' },
          {
            pattern: /^(?:(?:\+|00)86)?1\d{10}$/,
            message: '请输入正确的手机号码格式',
            trigger: ['blur', 'change']
          }
        ],
        ratio: [{ required: true, message: '请输入', trigger: 'blur' }],
        password: [
          { required: true, message: '请输入', trigger: 'blur' },
          {
            pattern: /^\w{6,15}$/,
            message: '请输入 6 到 15 位的密码',
            trigger: ['blur', 'change']
          }
        ],
        account: [
          { required: true, message: '请输入', trigger: 'blur' },
          {
            pattern: /^(?:(?:\+|00)86)?1\d{10}$/,
            message: '请输入正确的手机号码格式',
            trigger: ['blur', 'change']
          }
        ]
      },
      /* 当前数据 */
      row: {},
      id: ''
    }
  },
  methods: {
    /* 查询 */
    async onSubmit () {
      // console.log(this.formInline.reigionName)
      await this.axiosFn()
      this.partnerName = ''
    },
    /* --------------------------- */
    /* 分页 */
    handleCurrentChange (val) {
      this.pageIndex = val
      this.axiosFn()
    },
    /* --------------------- */
    /* 获取列表数据 */
    async axiosFn () {
      const res = await partnerList({
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        name: this.partnerName
      })
      // console.log(res)
      // 处理分成比例数据
      res.currentPageRecords.forEach((item) => {
        item.ratio = item.ratio + '%'
      })
      this.PartnerList = res
    },
    /* 新增合作商 */
    async addReigionFn () {
      this.dialogFormVisible = false
      await addPartner({
        ratio: this.form.ratio,
        name: this.form.name,
        phone: this.form.phone,
        contact: this.form.contact,
        password: this.form.password,
        account: this.form.account,
        mobile: this.form.account
      })
      this.axiosFn()
    },
    addClickFn () {
      this.dialogFormVisible = true
      this.arrOpinion = this.arr[0]
      this.form.ratio = 1
      this.form.name = ''
      this.form.phone = ''
      this.form.contact = ''
      this.form.password = ''
      this.form.account = ''
    },
    /* -------------------------- */
    /* 删除区域 */
    async delFn (id) {
      // console.log(id)
      this.id = id
      // console.log(this)
      this.$msgbox('你确定要删除该合作商吗？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await delPartner(this.id)
          if (!res) return
          this.axiosFn()
          this.$message({
            type: 'success',
            message: '成功删除该合作商!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除该合作商'
          })
        })
    },
    /* -------------------------- */
    /*  查看详情 */
    async lookFn (row) {
      this.dialogTableVisible = true
      // console.log(row)
      this.row = JSON.parse(JSON.stringify(row))
    },
    /* ------------------------- */
    /* 修改区域 */
    async changeFn (row) {
      this.form.createTime = row.createTime.split('T').join(' ')
      this.form.ratio = row.ratio.slice(0, row.ratio.length - 1)
      this.id = row.id
      this.form.name = row.name
      this.form.phone = row.phone
      this.form.contact = row.contact
      this.form.mobile = row.mobile
      // console.log(row)
      // console.log(row)
      this.dialogFormVisible = true
      this.arrOpinion = this.arr[1]
    },
    async changeReigionFn () {
      await changePartner(this.id, {
        ratio: this.form.ratio,
        name: this.form.name,
        phone: this.form.phone,
        contact: this.form.contact,
        mobile: this.form.mobile
      })
      this.dialogFormVisible = false
      this.axiosFn()
      this.form.ratio = 1
      this.form.name = ''
      this.form.phone = ''
      this.form.contact = ''
    },
    /* -------------------------- */
    /* 重置密码 */
    resetFn (id) {
      // console.log(id)
      this.id = id

      this.$confirm('你确定要重置该合作商密码吗？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await resetPwd(this.id)
          this.$message({
            type: 'success',
            message: '重置密码成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消重置密码'
          })
        })
    },
    /* 取消按钮 */
    clickFn () {
      this.dialogFormVisible = false
      this.form.regionName = ''
      this.form.remark = ''
    },
    /* -------------------- */
    /* 序号 */
    indexMethod (index) {
      return index + 1 + 10 * (this.pageIndex - 1)
    }
  },
  async created () {
    this.axiosFn()
  }
}
</script>

<style lang="scss" scoped>
.header {
  background-color: #fff;
  display: flex;
  height: 64px;
  align-items: center;
  margin-bottom: 25px;
  padding-left: 17px;

  .el-form-item {
    margin-bottom: 0px;
  }
  .el-button {
    min-width: 80px;
    height: 36px;
    padding: 0;
    background-color: #5f84ff;
    border: none;
  }
  ::v-deep .el-input__inner {
    height: 36px;
  }
}
.body {
  width: 100%;
  background-color: #fff;
  padding-left: 30px;
  padding: 18px 16px;
  ::v-deep .el-table {
    box-sizing: border-box;
    max-width: 100%;
    background-color: #fff;
    font-size: 15px;
    color: #606266;
    border: 0px;
    .el-link--inner {
      margin-right: 10px;
      font-size: 16px;
    }
  }
  .el-button {
    width: 80px;
    height: 36px;
    padding: 0;
    background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
    border: none;
    color: #fff;
    margin-bottom: 10px;
  }
  .el-table--scrollable-x .el-table__body-wrapper {
    overflow-x: hidden;
  }
  .page {
    height: 28px;
    line-height: 28px;
    font-size: 15px !important;
    color: #dbdfe5 !important;
    font-weight: 400;
    margin: 25px 10px;
  }
  ::v-deep .btn-next,
  ::v-deep .btn-prev {
    width: 70px;
    height: 32px;
    margin: 0 16px;
    border-radius: 2px;
    background-color: #d5ddf8;
    margin: 20px 14px;
  }
}
/* 弹框 */
::v-deep .el-dialog {
  border-radius: 10px;
  padding: 30px 20px;
}
/* table 弹框 */

.dialog_bottom {
    padding-left: 24px;
    .el-row {
        margin-bottom: 20px;
        span {
            display: inline-table;
            line-height: 30px;
        }
    }
}
</style>>
